<?php 

    $idPaciente = $this->request->data['Paciente']['id'];
?>
<div class="page_title">
    <span class="title_icon"><span class="coverflow"></span></span>
    <h3>TOMA  DE FOTO DEL PACIENTE:</h3>    
</div>
<div id="content">
    <div class="grid_container">
        <div class="grid_12">
            <?php echo $this->Form->create('Paciente', array('id' => "form103", 'class' => "form_container left_label valid_tip")) ?>
            <?php echo $this->Form->hidden('Paciente.id', array('value'=>$this->request->data['Paciente']['id']));?>
            <div class="widget_wrap">
                <div class="widget_top">
                    <span class="h_icon list"></span>
                    <h6><b>EDITAR FOTO DEL PACIENTE: # <?php echo $this->request->data['Paciente']['codigo']. ' -  '.$this->request->data['Paciente']['nombres'].' '.$this->request->data['Paciente']['ap_paterno'].' '.$this->request->data['Paciente']['ap_materno']?></h6></b>
                </div>
                <div class="widget_content">

                    <ul>
                        <li>
                            <div class="form_grid_12">
                                <tr>
                                    <label class="field_title">Editar foto del paciente</label>
                                    <td>
                                        <div id="tipoImagen">
                                            <select name="tipoImg" id="tipoimg">
                                                <option value="subir">Subir Imagen</option>
                                                <option value="camara">Usar camara</option>
                                      </select>   
                                        </div>
                                        <div id="subirImagen" style="display:block;">
                                            <input type='file' name="data[Paciente][foto]" value="" size='50' placeholder="Inserte Su imagen Paciente">  
                                        </div>
                                        <div id="camara" style="display:none;">
                                            <video autoplay controls width="200px" height="180px"></video>
                                            <?php echo $this->Html->image('fotos/vista-previa.png', array('width'=>'200px', 'height'=>'150px', 'id'=>'captura'))?>
                                            <canvas id="captura-canvas" style="display:none; width: 200px; height: 180px;" ></canvas>
                                            <center><table>
                                                <tr>
                                                    <td><a href="" id="boton-capturar">Estas Listo?</a></td>
                                                    
                                                    <td><a href="" id="boton-parar">Parar Camara</a></td>
                                                </tr>
                                            </table></center>
                                            <input type="hidden" name="data[Paciente][foto]" id="imagen2" value="" />
                                        </div> 
                                    </td>   
                                </tr>
                            <div>    
                        </li>
                        <li>
                            <div class="contenedor">
                                <audio preload="auto">
                                    <source src="audios/notificacion.mp3">
                                </audio>
                            </div>
                        </li>    
                        <li>
                            <div class="form_grid_12">
                                <div class="form_input">
                                    <button type="submit" class="btn_small btn_blue"><span>Guardar cambios</span></button>
                                    <button type="reset" class="btn_small btn_orange"><span>Limpiar datos</span></button>
                                </div>
                            </div>
                        </li>
                        <li>   
                        </li>
                    </ul>
                </div>
            </div>
            </form>
        </div>
        <script>
         // starding with webcammmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
            $(document).on('ready',iniciarForm);//jquery

            //starding javascript
            function iniciarForm(){

                var localMediaStream=null;
                var video=null;
                var canvas=document.querySelector('#captura-canvas');
                var img=document.querySelector('#captura');
                var ctx=canvas.getContext('2d');
                var data =null;

                $('#tipoimg').on('change',function(){
                    var tipo=$('#tipoimg').val();
                    var imagen=document.getElementById('subirImagen');
                    var camara=document.getElementById('camara');

                    if(tipo == "subir"){
                        
                        imagen.style.display='block';
                        camara.style.display='none';
                        pararCamara();
                    }
                    if(tipo == "camara"){
                        
                        imagen.style.display='none';
                        camara.style.display='block';
                        iniciarCamara();

                    }
                });
                function iniciarCamara(){
                    //preguntamos si tiene GetUserMedia
                    if (tieneGetUserMedia()) {
                        var onFailSoHard = function(e) {
                            console.log('Reeeejected!', e);
                        };  

                        window.URL=window.URL || window.webkitURL;
                        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
                        navigator.getUserMedia({video:true},function(vid){
                            video =document.querySelector('video');
                            video.src = window.URL.createObjectURL(vid);
                            localMediaStream=vid;
                            //tamanioCanvas();
                            video.onloadedmetadata = function(e) {

                            };  
                        },onFailSoHard);
                    } else {
                      alert(' shit!!! plese you have to use google ghrome ');
                    }
                }
                function tieneGetUserMedia() {
                    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
                            navigator.mozGetUserMedia || navigator.msGetUserMedia);
                }
                function tamanioCanvas(){
                    setTimeout(function(){
                        canvas.width=video.videoWidth;
                        canvas.height=video.videoHeight;
                        //img.height=video.videoHeight;
                        //img.width=video.videoWidth;
                    });
                }
                function captura(){
                    tamanioCanvas();
                    ctx.drawImage(video,0,0);
                    img.src=canvas.toDataURL('image/png');
                    //datosImagen=canvas.toDataURL('image/png');
                    data=img.src.substr(22); 
                    $('#imagen2').val(data);
                }
                $('#boton-parar').on('click',function(e){
                    e.preventDefault();
                    if(localMediaStream){
                        video.pause();
                        localMediaStream.stop();
                        this.textContent='Iniciar Camara';
                        localMediaStream=null;
                    }else{
                        iniciarCamara();
                        this.textContent='Parar Camara';
                    }
                    
                });
                function pararCamara(){
                    if(localMediaStream){
                        video.pause();
                        localMediaStream.stop();
                        localMediaStream=null;
                        $('#boton-capturar').textContent='Estas Listo?'
                    }
                }
                $('#boton-capturar').on('click',function(e){
                    e.preventDefault();
                    captura();
                    if((this.textContent=='Estas Listo?') || (this.textContent=='Otra Captura?')){
                        this.textContent='Capturar';
                        img.src='<?php echo $this->webroot; ?>img/fotos/listo.png';
                    }else{
                        this.textContent='Otra Captura?';
                    }
                    
                });                
            } 

        </script>

    </div>
    <span class="clear"></span>
</div>
